BEM (Block, Element, Modifier)
Example: A button component with BEM naming convention.
CSS Example:
<!-- HTML -->
<div class="button button--primary">Click Me</div>
/* CSS */
.button {
padding: 10px 20px;
border: none;
font-size: 16px;
}
.button--primary {
background-color: #007bff;
color: #fff;
}
SCSS Example:
<!-- HTML -->
<div class="button button--primary">Click Me</div>
/* SCSS */
.button {
padding: 10px 20px;
border: none;
font-size: 16px;
&--primary {
background-color: #007bff;
color: #fff;
}
}
OOCSS (Object-Oriented CSS)
Example: Card component with structure and skin separation.
CSS Example:
<!-- HTML -->
<div class="card structure skin">
<h2>Title</h2>
<p>Content here.</p>
</div>
/* CSS */
.structure {
padding: 20px;
border: 1px solid #ddd;
}
.skin {
background-color: #f8f9fa;
color: #343a40;
}
SCSS Example:
<!-- HTML -->
<div class="card structure skin">
<h2>Title</h2>
<p>Content here.</p>
</div>
/* SCSS */
.structure {
padding: 20px;
border: 1px solid #ddd;
}
.skin {
background-color: #f8f9fa;
color: #343a40;
}
SMACSS (Scalable and Modular Architecture for CSS)
Example: Layout and Module styles with a state class.
CSS Example:
<!-- HTML -->
<div class="layout-container">
<header class="module-header">Header</header>
<main class="module-main state-active">Main Content</main>
</div>
/* CSS */
.layout-container {
display: flex;
flex-direction: column;
}
.module-header {
background: #343a40;
color: white;
}
.state-active {
border: 2px solid #28a745;
}
SCSS Example:
<!-- HTML -->
<div class="layout-container">
<header class="module-header">Header</header>
<main class="module-main state-active">Main Content</main>
</div>
/* SCSS */
.layout-container {
display: flex;
flex-direction: column;
}
.module-header {
background: #343a40;
color: white;
}
.state-active {
border: 2px solid #28a745;
}